// 客服列表 三级路由
import { useEffect, useRef } from "react";
import {
  ProTable,
} from "@ant-design/pro-components";
import Csladd from '../../../../components/Csladd';
import Csldel from '../../../../components/Csldel';
import Csledit from '../../../../components/Csledit';
import Cslmodify from '../../../../components/Cslmodify';
import cslCss from './CustomerServiceList.module.css';
import { useDispatch, useSelector } from "react-redux";
import { csListSet, searchSet, delSet } from '../../../../store/reducer/customerServiceList';
import request from "../../../../http/request";
// import { Button, Modal, Form, Input } from 'antd';



export default () => {
  // const [list, setList] = useState([]);
  // console.log(list);
  const dis = useDispatch()
  const ref = useRef()
  useEffect(() => {
    request.get("/api/customerserviceList").then((res) => {
      // console.log(res.list);
      // setList(res.list);
      dis(csListSet(res.list));
    });
  }, []);
  const list = useSelector((state) => {
    return state.customerServiceList.csList
  })
  // console.log(list);

  // 搜索
  const search = () => {
    console.log(ref.current.value);
    dis(searchSet(ref.current.value));
  }
  // 删除
  const del = (item) => {
    console.log(item);
    dis(delSet(item));
  }

  const valueEnum = {
    0: "close",
    1: "online",
  };

  const tableListDataSource = [];

  list.forEach((item, index) => {
    for (let i = 1; i < 3; i += 1) {
      return tableListDataSource.push({
        key: item.key,

        id: item.id,
        name: item.name,
        // img: item.img,
        img: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        status: valueEnum[item.status],
        ip: item.ip,
        time: item.time,
      });
    }
  });

  const columns = [
    {
      title: "ID",
      width: 80,
      dataIndex: "key",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "客服编码",
      width: 80,
      dataIndex: "id",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "客服名称",
      width: 80,
      dataIndex: "name",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "客服头像",
      width: 80,
      dataIndex: "img",
      valueType: "image",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "在线状态",
      width: 80,
      dataIndex: "status",
      filters: true,
      onFilter: true,
      initialValue: "all",
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        close: { text: "离线", status: "Default" },
        online: { text: "上线", status: "Success" },
      },
      render: (_) => <a>{_}</a>,
    },
    {
      title: "创建时间",
      width: 140,
      dataIndex: "time",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "操作",
      key: "option",
      width: 120,
      valueType: "option",
      render: (text, record) => [
        <a key="edit"><Csledit data={record}></Csledit></a>,
        <a key="modify"><Cslmodify data={record}></Cslmodify></a>,
        <a key="del" onClick={() => del(record)}><Csldel></Csldel></a>,
      ],
    },
  ];

  return (
    <div>
      <div className={cslCss.box}>
        <h2 className={cslCss.h2}>搜索信息</h2>
        <div className={cslCss.top}>
          <span
            style={{
              width: "150px",
              height: "50px",
              fontSize: "30px",
              lineHeight: "50px",
              background: "#eee",
              textAlign: "center",
            }}
          >
            客服姓名
          </span>
          <input ref={ref} style={{ width: "150px", height: "50px", fontSize: "22px" }} />
          <button
            onClick={search}
            style={{
              background: "#acd",
              border: "none",
              width: "100px",
              fontSize: "20px",
              height: "50px",
            }}
          >
            搜索
          </button>
        </div>
      </div>
      {/* 添加 */}
      <a
        style={{
          background: "#acd",
          border: "none",
          width: "100px",
          fontSize: "20px",
          height: "50px",
          marginTop: "20px",
          display: "block"
        }}
      >
        <Csladd ></Csladd>
      </a>
      <ProTable
        dataSource={tableListDataSource}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        columns={columns}
        search={false}
        dateFormatter="string"
      />
    </div>
  );
};
